<template>
  <div v-loading="loading" class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单详情</span>
        <el-button style="float: right; padding: 3px 0" class="el-icon-back" type="text" @click="goBackClick">返回</el-button>
      </div>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="订单信息" name="0">
          <el-descriptions title="订单信息" :direction="direction" :border="border" :column="columnNum">
            <el-descriptions-item label="订单号">{{ orderInfo.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="订单日期">{{ orderInfo.orderDate }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <sale-order-state-tag v-model="orderInfo.orderState" />
            </el-descriptions-item>
            <el-descriptions-item label="付款状态">
              <payment-state-tag v-model="orderInfo.paymentState" />
            </el-descriptions-item>
            <el-descriptions-item label="含税单价">
              <money-format v-model="orderInfo.unitPrice" />
            </el-descriptions-item>
            <el-descriptions-item label="不含税单价">
              <money-format v-model="orderInfo.unTaxPrice" />
            </el-descriptions-item>
            <el-descriptions-item label="数量">
              {{ orderInfo.quantity }}
              <dict-table-column v-model="orderInfo.unit" dict-key="prod_unit" />
            </el-descriptions-item>
            <el-descriptions-item label="税率">
              {{ orderInfo.taxRate }}%
            </el-descriptions-item>
            <el-descriptions-item label="含税总金额">
              <money-format v-model="orderInfo.amount" />
            </el-descriptions-item>
            <el-descriptions-item label="不含税总金额">
              <money-format v-model="orderInfo.unTaxAmount" />
            </el-descriptions-item>
            <el-descriptions-item label="付款金额">
              <money-format v-model="orderInfo.paidAmount" />
            </el-descriptions-item>
            <el-descriptions-item label="发货状态">
              <shipment-state-tag v-model="orderInfo.shipmentState" />
            </el-descriptions-item>
            <el-descriptions-item label="发货数量">
              {{ orderInfo.shippedQuantity }}
              <dict-table-column v-model="orderInfo.unit" dict-key="prod_unit" />
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              {{ orderInfo.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="客户信息" name="1">
          <el-descriptions title="客户信息" :direction="direction" :border="border" :column="columnNum">
            <el-descriptions-item label="客户编号">
              {{ customerInfo.customerNo }}
            </el-descriptions-item>
            <el-descriptions-item label="客户名称">
              {{ customerInfo.customerName }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ customerInfo.contacts }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              {{ customerInfo.phoneNum }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ customerInfo.email }}
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              {{ customerInfo.address }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="产品信息" name="2">
          <el-descriptions title="产品信息" :direction="direction" :border="border" :column="columnNum">
            <el-descriptions-item label="模具名称">
              {{ productInfo.moldName }}
            </el-descriptions-item>
            <el-descriptions-item label="颜色">
              {{ productInfo.color }}
            </el-descriptions-item>
            <el-descriptions-item label="材质">
              {{ productInfo.material }}
            </el-descriptions-item>
            <el-descriptions-item label="尺码">
              {{ productInfo.size }}
            </el-descriptions-item>
            <el-descriptions-item label="长度">
              {{ productInfo.length }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="排产信息" name="3">
          <el-descriptions v-if="produceInfo" :direction="direction" :border="border" title="排产信息" :column="columnNum">
            <el-descriptions-item label="排产编号">
              {{ produceInfo.produceNo }}
            </el-descriptions-item>
            <el-descriptions-item label="生产日期">
              {{ produceInfo.produceDate }}
            </el-descriptions-item>
            <el-descriptions-item label="结束日期">
              {{ produceInfo.produceEndDate }}
            </el-descriptions-item>
            <el-descriptions-item label="生产状态">
              <produce-state-tag v-model="produceInfo.produceState" />
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <priority-tag v-model="orderInfo.priority" />
            </el-descriptions-item>
            <el-descriptions-item label="总数">
              <el-tag>{{ produceInfo.quantity }} {{ orderInfo.unit }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="已生产数量">
              <el-tag type="success">{{ produceInfo.produceQuantity }} {{ orderInfo.unit }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="剩余数量">
              <el-tag type="danger">{{ produceInfo.remainingQuantity }} {{ orderInfo.unit }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="生产进度">
              <el-progress :percentage="produceInfo.percentage" :stroke-width="12" style="width: 80%;" />
            </el-descriptions-item>
          </el-descriptions>
          <el-empty v-else :image-size="200" />
        </el-tab-pane>
        <el-tab-pane label="送货信息" name="4">
          <div v-if="shipmentInfoList.length > 0">
            <el-descriptions v-for="(shipmentInfo,index) in shipmentInfoList" :key="index" :direction="direction" :border="border" :column="columnNum" :title="shipmentInfoList.length>1?'送货信息'+(index+1):'送货信息'">
              <el-descriptions-item v-for="(item,i) in shipmentInfo" :key="i" :label="item.label">
                <div v-if="item.type==='dict'">
                  <dict-table-column v-model="item.value" :dict-key="item.dictKey" />
                </div>
                <div v-else>
                  {{ item.value }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-empty v-else :image-size="200" />
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="5">
          <el-timeline style="padding: 20px">
            <el-timeline-item v-for="(item,index) in bizLogList" :key="index" :timestamp="item.createTime" placement="top">
              <h4>{{ item.operationType }} {{ item.details }}</h4>
              <p>{{ item.username }}</p>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--    <div class="footer_div">
      <el-button @click="goBackClick">返回</el-button>
    </div>-->
  </div>
</template>

<script>
import { order_detail } from '@/api/sale/order'
import { customer_detail } from '@/api/base-data/customer'
import { selectShipmentByOrderId } from '@/api/sale/shipment'
import { selectBizLogByBizId } from '@/api/system/bizLog'

/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'DetailModule',
  data() {
    return {
      activeTab: '0',
      columnNum: 2,
      border: true,
      direction: 'horizontal', // vertical
      orderInfo: {},
      productInfo: {},
      produceInfo: {},
      customerInfo: {},
      shipmentInfoList: [],
      loading: false,
      bizLogList: []
    }
  },
  mounted() {
    var id = this.$route.query.id
    if (id) {
      this.initValue(id)
      this.getBizLog(id)
    }
  },
  methods: {
    initValue(id) {
      this.loading = true
      order_detail(id).then(resp => {
        if (resp.success) {
          this.orderInfo = resp.data
          this.productInfo = resp.data.productInfo
          this.produceInfo = resp.data.produceInfo
          this.loading = true
          customer_detail(this.orderInfo.customerId).then(r1 => {
            if (r1.success) {
              this.customerInfo = r1.data
            }
          }).finally(() => {
            this.loading = false
          })
          this.loading = true
          selectShipmentByOrderId(this.orderInfo.id).then(r3 => {
            this.shipmentInfoList = []
            if (r3.success) {
              for (let i = 0; i < r3.data.length; i++) {
                var shipmentInfo = r3.data[i]
                var data = []
                data.push({ label: '送货单号', value: shipmentInfo.shipmentNo })
                data.push({ label: '送货日期', value: shipmentInfo.shipmentDate })
                data.push({ label: '数量', value: shipmentInfo.quantity + shipmentInfo.unit })
                data.push({ label: '收件人名称', value: shipmentInfo.recipientName })
                data.push({ label: '收件人手机', value: shipmentInfo.recipientPhoneNum })
                data.push({ label: '收件人地址', value: shipmentInfo.recipientAddress })
                data.push({ label: '送货方式', type: 'dict', value: shipmentInfo.shipmentType, dictKey: 'shipment_type' })
                if (shipmentInfo.shipmentType === '1' || shipmentInfo.shipmentType === '2') {
                  data.push({ label: '物流单号', value: shipmentInfo.trackingNo })
                  data.push({ label: '物流公司', value: shipmentInfo.carrier })
                  data.push({ label: '运费', value: shipmentInfo.shipCost })
                }
                this.shipmentInfoList.push(data)
              }
            }
          }).finally(() => {
            this.loading = false
          })
        }
      }).finally(() => {
        this.loading = false
      })
    },
    goBackClick() {
      this.$router.push({ path: this.$route.query.from })
    },
    getBizLog(bizId) {
      const query = { bizId: bizId, tableName: 'erp_sale_order' }
      selectBizLogByBizId(query).then(resp => {
        if (resp.success) {
          this.bizLogList = resp.data
        }
      })
    }
  }
}
</script>

<style scoped>
.urgent {
  height: 100px;
  width: 127px;
  background-image: url('../../../../images/urgent.png');
  background-size: cover;
  position: absolute;
  right: 10%;
}

.normal {
  height: 100px;
  width: 127px;
  background-image: url('../../../../images/normal.png');
  background-size: cover;
  position: absolute;
  right: 10%;
}

.cancel {
  height: 100px;
  width: 147px;
  background-image: url('../../../../images/cancel_order.png');
  background-size: cover;
  position: absolute;
  right: 10%;
}

.finished {
  height: 100px;
  width: 107px;
  background-image: url('../../../../images/finished.png');
  background-size: cover;
  position: absolute;
  right: 10%;
}
</style>
